import React, { useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Checkbox, Col, Row } from "antd";
import detailData from "../../assets/data/detailData";
import close from "../../assets/img/close.png";

import RelationPageData from "./CoupleData";
import "./DetailCouple.css";

import banner1 from "../../assets/img/detail/couple/banner1.png";
import banner2 from "../../assets/img/detail/couple/banner2.png";
import banner3 from "../../assets/img/detail/couple/banner3.png";
import banner4 from "../../assets/img/detail/couple/banner4.png";
import banner5 from "../../assets/img/detail/couple/banner5.png";
import banner6 from "../../assets/img/detail/couple/banner6.png";
import banner7 from "../../assets/img/detail/couple/banner7.png";
import couple from "./../../assets/img/couple.png";

function DetailCouple(props = {}) {
  const { data = [] } = props;
  let navigate = useNavigate();
  const { search = "" } = useLocation();
  const [selectItem, setSelectItem] = useState({
    A: 0,
    B: 0,
    C: 0,
    D: 0,
    E: 0,
  });

  const searchId = search.split("=")[1];
  const { detailList, color, barMargin, bgColor } = detailData().DetailCouple;
  const {
    pageOne,
    pageTwo,
    pageTree,
    pageFour,
    pageFive,
    pageQuestions,
    pageLove,
  } = RelationPageData();
  function pathSwitch(path = `/`) {
    navigate(path);
  }
  const [checkedList, setCheckedList] = useState([]);
  const onQuestionsChange = (values) => {
    let result = { A: 0, B: 0, C: 0, D: 0, E: 0 };
    const last = values[values.length - 1];
    if (last && values.length > 1) {
      const lastNum = last.replace(/[^\d]/g, " ");
      const index = values.slice(0, values.length - 1).findIndex((e) => {
        const currentNum = e.replace(/[^\d]/g, " ");
        return currentNum === lastNum;
      });
      if (index > -1) {
        values.splice(index, 1);
      }
    }
    setCheckedList([...values]);
    let resultKey = Object.keys(result);
    let arr = [...values];
    arr.forEach((e, i) => {
      resultKey.forEach((f, o) => {
        if (e.includes(f)) {
          result[f] = result[f] + 1;
        }
      });
    });
    setSelectItem({ ...result });
  };

  return (
    <div className="page-detail-info" style={{ backgroundColor: bgColor }}>
      <div style={{ marginTop: "80px", zIndex: 3, position: "relative" }}>
        <div className="cloud cloud-l page-cloud-l"></div>
        <div className="cloud cloud-m page-cloud-about-m"></div>
        <div className="cloud cloud-r page-cloud-about-r"></div>
        <img
          alt=""
          className="left-ban"
          style={{ position: "absolute", top: "290px", width: "200px" }}
          src={"https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/egg.png"}
        ></img>
        <img
          alt=""
          style={{
            position: "absolute",
            top: "0",
            width: "160px",
            right: "32%",
          }}
          src={couple}
        ></img>
        <div style={{ display: "flex", width: "50%", margin: "auto" }}>
          <div style={{ margin: "100px 20px 0" }}>
            <div className="page-item">
              <a name={"0"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[0].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner1}></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name={"01"}></a>
                  愛情親密有妙計<span>1</span>：
                </span>
                互相了解
              </div>
              <p className="page-item-info">
                你相信親密有妙計嗎？
                要找到喜歡的人已經不容易，再跟喜歡的人保持親密更難。心理學家亞倫（Arthor
                Aron)和他的團隊做了一個名為「人際親密感產生試驗」的實驗，他們宣稱只要讓兩個陌生人互相問對方36條問題，透過讓彼此卸下心防、展露最脆弱的一面，雙方的親密度將會大幅上升。同樣的，你們亦可以透過這些問題，更加了解你的伴侶，增加彼此的親密度。
              </p>

              <div className="page-item-five-box page-item-five-couple">
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    • 如果你可以選擇任何人來當你的晚餐嘉賓，你會選擇誰？
                    <br></br>• 你希望自己出名嗎？希望自己以什麼方式出名？{" "}
                    <br></br>• 在打電話之前，你是否曾經預演過自己要說什麼？
                    <br></br>• 為什麼？
                    對於你來說，一個「完美」的一天必須具備什麼元素？ <br></br>•
                    你上一次唱歌給自己聽是什麼時候？上一次唱給別人聽呢？
                    <br></br>•
                    如果你能夠活到九十歲，而你能選擇保有三十歲的身體或三十歲的心靈活力，你會選擇保有哪個?
                    <br></br>• 你對於自己將如何死去，是否曾有過神秘的預感？
                    <br></br>• 說出三個你和你對面這位先生/女士的共同點<br></br>•
                    在人生中，你最感激的事情是什麼？<br></br>•
                    如果你能改變你成長過程中的任何一件事，你會想改變什麼？
                    <br></br>•
                    花四分鐘時間告訴對面這位夥伴你的人生故事，越詳細越好。
                    <br></br>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    •
                    如果你明天一早醒來，你可以增加一個技能或能力，你希望是什麼？
                    <br></br>•
                    如果有一個水晶球可以告訴你關於你的所有事、你的人生或你的未來，你最想知道什麼是？
                    <br></br>•
                    有沒有什麼事情是你夢寐以求想做的？為何你沒有做這件事？
                    <br></br>• 你人生最大的成就是什麼？<br></br>•
                    在友情中，你最重視的事情是什麼？<br></br>•
                    你人生中最珍惜的是哪一段回憶？<br></br>•
                    你人生中最糟糕的是哪一段回憶？<br></br>•
                    如果你知道一年後你會死掉，你會想改變現在你的生活方式嗎？為什麼？
                    <br></br>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    • 友情對於你的意義是什麼？<br></br>•
                    愛情以及喜歡在你人生中扮演著什麼樣的角色？<br></br>•
                    輪流分享你面前的夥伴五個正向特質<br></br>•
                    你們的家庭關係如何？<br></br>•
                    你會覺得自己比其他家庭的孩子更幸福嗎？<br></br>•
                    你覺得自己與媽媽的關係如何？<br></br>•
                    造三個以「我們」開頭的句子。例如「我們都在這個房間裡感到……」
                    <br></br>• 完成以下這個句子：「我希望有人能與我共享……」
                    <br></br>•
                    若你將和你面前的夥伴成為親密的朋友，請跟他分享身為親密朋友該知道的事
                    <br></br>• 誠實的告訴你面前的夥伴，你喜歡他的地方<br></br>•
                    和夥伴分享你人生中最尷尬的片刻<br></br>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    •
                    你上一次在別人面前哭泣是什麼時候？還是你通常自己一個人哭泣？
                    <br></br>• 告訴你的夥伴，你已經開始喜歡他的某些特質<br></br>
                    • 對於你而言，哪些事情開不得玩笑？<br></br>•
                    如果你今晚就會死去，死去前沒有機會再與任何人溝通，你會最後悔沒和誰說什麼話？為什麼這些話你
                    不及早跟他說？<br></br>•
                    你的房子著火了，裡頭有所有你愛的東西，你只有幾分鐘的時間可以救出一個東西，你會選擇救什麼？
                    <br></br>• 家族裡的所有成員哪個人死去，你會最傷心？<br></br>
                    • 為什麼？
                    分享一個你的私人困擾，並請你的夥伴給你一些建議。接著問問他對於你的私人困擾的看法。
                    <br></br>
                  </p>
                </div>
              </div>
              <p className="page-item-info">
                亞倫認為毫無掩飾的脆弱展現能讓親密度升溫，他的提供讓人在短時間內卸下武裝的方向，讓人能夠自在、輕鬆地進行深入的交流。過程中，你能透過彼此討論，分享答案背後的緣由來更了解對方的想法、價值觀、原則。如果你認為自己未能輕易開口或缺乏溝通的方向，你亦可以考慮讓輔導員幫助你，他們能夠以專業的角度引導你疏理自己內心的想法，或幫助你和伴侶好好溝通。
              </p>
              <div
                style={{
                  borderBottom: `2px dashed ${color}`,
                  margin: "40px 0",
                }}
              ></div>
              <img alt="" className="page-item-banner" src={banner2}></img>

              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name={"02"}></a>
                  愛情親密有妙計<span>2</span>：
                </span>
                審視關係
              </div>

              <p className="page-item-info" style={{ width: "50%" }}>
                根據Sternberg的愛情三角理論，愛由親密（Intimacy）、激情（Passion）和承諾（Commitment）組成。三個元素的交互影響形成不同模式的愛。同時存有親密、激情和承諾的愛情就是Sternberg理論中完美的愛（Consummate
                Love）。
              </p>
              <div className="relation-pop-three relation-pop-three-couple">
                {pageTree.map((e, i) => {
                  const { title, value } = e;
                  return (
                    <div className="relation-item">
                      <div
                        className="relation-item-title-three"
                        style={{ color: color }}
                      >
                        {" "}
                        {title}
                      </div>
                      <div className="relation-item-value">{value}</div>
                    </div>
                  );
                })}
              </div>
              <p
                className="page-item-info"
                style={{ width: "50%", marginBottom: "80px" }}
              >
                愛情三角理論固然可以讓我們更了解愛的構成，並審視自己與愛人的關係，但單靠一個愛情三角並不足以全面地了解一個人的戀愛狀況。Sternberg認為愛情三角和自我概念一樣，都可以分為「真實三角」（Actual
                Triangle）和「理想三角」（Ideal
                Triangle）。過往的戀愛經歷會令我們對未來的戀愛產生相應的期望，但理想的愛情是一回事，現實的愛情可能又是另一回事。同時，Sternberg強調愛情三角可以分成「感覺三角」（Triangle
                of Feelings）和「行動三角」（Triangle of
                Action）。要知道，戀愛是兩個人的關係。單單對伴侶有親密、熱情的感覺是不足夠的，惟有具體行動才可以讓伴侶感受到關係中的愛意。主動和伴侶分享日常大小事，甚至是一個關懷的目光，都可以是表達愛意的行動。愛情三角理論雖然聽似只描述了愛的三個元素，在應用上卻可以讓我們從多個角度切入，理解自己是怎樣看待愛情，怎樣實踐愛情。
              </p>
              <div className="page-item-sub">
                親密關係
                <span style={{ color: color, fontSize: "18px" }}>4</span>階段
              </div>

              <p className="page-item-info">
                另一個用作審視關係的理論是親密關係四階段的理論。英國心理學大師Jeff
                Allen，將親密關係分成四階段，每個階段都有其特定的特徵和挑戰。
              </p>

              <div className="page-item-six-relation page-item-six-relation-couple">
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    甜蜜期（Honeymoon Phase）
                  </div>
                  <div className="page-item-six-item-value">
                    在這個階段，兩個人感到互相吸引，充滿愛意和激情，是一段充滿浪漫和激情的開始階段。伴侶可能會花很多時間在一起，分享共同的興趣和活動。通常在這個階段中，人們對對方的缺點和問題看得相對輕微，而且表現出更多的溫和和體貼。
                  </div>
                </div>
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    角力期（Power Struggle）
                  </div>
                  <div className="page-item-six-item-value">
                    角力期是在甜蜜期之後，當激情開始消退時出現的階段。伴侶可能開始意識到彼此的差異和矛盾，並開始疏理關係中的衝突。這個階段可能伴隨著不安、爭執和情感波動，這是一個關係中的成長和調整階段，需要學習如何相討、溝通和解決衝突。
                  </div>
                </div>
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    假性親密期（Pseudo-Intimacy）
                  </div>
                  <div className="page-item-six-item-value">
                    假性親密期可能出現在角力期後。在這個階段，一些人可能會開始建立假性親密關係，這種關係看似親密，但實際上缺乏真正的情感連結。可能出於不正確的動機，例如寂寞、社會壓力或恐懼而保持這種關係。
                  </div>
                </div>
                <div className="page-item-six-item">
                  <div className="page-item-six-item-title">
                    夥伴期（Committed Partnership）
                  </div>
                  <div className="page-item-six-item-value">
                    夥伴期是一個成熟的關係階段，當兩個人已經克服了角力期和假性親密期的挑戰，建立了更穩定和健康的連結。在這個階段，伴侶更加了解彼此，並學會彼此支持和尊重。他們通常建立了共同的目標和價值觀，並願意長期投入關係。這個階段可能伴隨著更多的安全感、穩定性和情感滿足感。
                  </div>
                </div>
              </div>

              <p className="page-item-info">
                每對情侶的經歷都是獨特的，關係可能不會遵循這些次序，也可能會多次在不同階段之間循環。重要的是要理解自己和另一半在哪個階段，以便應對關係中的挑戰，並共同努力維持健康的親密關係。
              </p>
              <div className="page-item-sub">你在關係中的感受</div>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    1
                  </span>
                  你有沒有「被優先考量」的感？
                </div>
                研究指出，在一段親密關係中，「無心之過」所帶來的傷害，有時不亞於「刻意為之」。習慣性遲到、晚回家時忘記先打通電話報備讓人放心、敷衍兩人之間的協議或約定......這些矛頭通通都指向同一件事：
                讓對方感到不被顧慮與重視。即便是小事，如果能夠在細節上多用心思，也能讓另一半感覺自己被優先考量。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    2
                  </span>
                  你有「被信任」的感覺？
                </div>
                我們都需要能為自己帶來信心和支持感的伴侶。有一個心理學術語叫做「預期效應」（Rosenthal-Effect），意思是指，當我們對另一個個體保持積極的信任與期待，無形中就能增強對方的信心，促使他有更好的表現。關係良好的伴侶都擁有一種共同的特質，就是他們堅信彼此的善良本性。衝突與爭吵並不會影響他們對伴侶人格的信心，就算對方某一次做出讓人失望的行為，他們仍然相信伴侶是一位誠懇且值得被愛的人。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    3
                  </span>
                  你有「被傾聽」的感覺？
                </div>
                研究發現，「積極傾聽」是讓親密伴侶感到被接納、被尊重的首要行為。心理學家
                Ronald E. Riggio
                也是這麼指出的：「真正的傾聽是撇開預設立場，用充分的同理心去回饋你的戀人
                ，包括他們的感受、思想、壓力與情感需求。
              </p>
              <p className="page-item-info">
                <div className="page-item-sub">
                  <span
                    style={{
                      color: color,
                      fontSize: "24px",
                      marginRight: "6px",
                    }}
                  >
                    4
                  </span>
                  你有「被渴望」的感覺？
                </div>
                基本上，所有的浪漫關係都有一種通用的經營守則，就是努力與自己的伴侶保持親密感
                。但是，展示渴望並不一定單指性交，可以是擁抱、親吻、搭肩、牽手等等。肢體碰觸所帶來的力量，能夠構成每段健康關係中不可或缺的一部分。
              </p>

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <img alt="" className="page-item-banner" src={banner3}></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name={"03"}></a>
                  愛情親密有妙計<span>3</span>：
                </span>
                愛情的語言
              </div>
              <p className="page-item-info">
                愛之語是由Gary Chapman
                所創設的愛情語言。它歸納與總結了五種愛情語言，它們代表了我們對戀人表達愛意的各種方式。核心概念是：每個人都有一種最擅長的主要愛情語言。在愛情裡有共通的語言，那麼彼此之間的交流就會很順利。相反的，如果彼此所熟悉的語言各不相同，那麼愛情的溝通就可能會遇到阻礙。例如，無法感受到對方的愛、甚至認為對方不再愛我了。
              </p>
              <p className="page-item-info">
                在每題的兩個選項中選出自己的喜好，然後統計 A、B、C、D、E
                哪個次數最多，就是你主要的愛的語言。
              </p>

              {/* 选择 */}
              <Checkbox.Group onChange={onQuestionsChange} value={checkedList}>
                {pageQuestions.map((e, i) => {
                  const { list } = e;
                  return (
                    <div className="questions-item questions-item-couple">
                      <div style={{ fontSize: "16px", fontWeight: 700 }}>
                        {i + 1}
                      </div>
                      {/* <div className="questions-box">
        {
          list.map((item) => {
            const { name, id } = item;
            return <div className="questions-box-line">
              <div className="questions-name">{name}</div>
              <div className="questions-an questions-an-active"><span></span></div>
            </div>
          })
        }
      </div> */}
                      <div className="questions-box">
                        {list.map((item) => {
                          const { name, id } = item;
                          return (
                            <div className="questions-box-line">
                              <div className="questions-name">{name}</div>
                              {/* <div className="questions-an questions-an-active"><span></span></div> */}
                              <Checkbox value={i + 1 + id}></Checkbox>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </Checkbox.Group>
              <div className="relation-total-score">
                <div>總計：</div>
                {/* {
    pageLove.map((e, i) => {
      const { title, total } = e;
      return <div className={`relation-total-item`}>
        <div className="relation-total-title"
        > {title} =
        </div>
        <div className="relation-total-total"
        >  {total}
        </div>
      </div>
    })
  } */}
                {Object.keys(selectItem).map((e, i) => {
                  return (
                    <div
                      className={`relation-total-item relation-total-item-couple`}
                    >
                      <div className="relation-total-title"> {e} =</div>
                      <div className="relation-total-total">
                        {" "}
                        {selectItem[e].toString().padStart(2, 0)}
                      </div>
                    </div>
                  );
                })}
              </div>

              <div className="relation-sub-title">
                <span
                  className="relation-sub-title"
                  style={{ color: color, fontSize: "24px" }}
                >
                  5{" "}
                </span>
                種愛的語言
              </div>
              <div className="relation-love-warp">
                {pageLove.map((e, i) => {
                  const { title, name, value } = e;
                  return (
                    <div
                      className={`relation-love-item relation-love-item-couple relation-love-item${title}`}
                    >
                      <div className="relation-love-title"> {title}</div>
                      <div
                        className="relation-love-name"
                        dangerouslySetInnerHTML={{ __html: name }}
                      ></div>
                      <div className="relation-love-value">{value}</div>
                    </div>
                  );
                })}
              </div>

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <img alt="" className="page-item-banner" src={banner4}></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name={"04"}></a>
                  愛情親密有妙計<span>4</span>：
                </span>
                解決負面溝通
              </div>
              <div className="page-item-sub">
                「末日四騎士」（Four Horsemen of the Apocalypse）
              </div>
              <p className="page-item-info">
                約翰高特曼博士（Dr John
                Gottman）發現了四種負面溝通模式，他稱之為「末日四騎士」（Four
                Horsemen of the
                Apocalypse），研究發現這些模式會影響關係，亦能預測這段愛情關係完結，且準確度超過九成。以下將介紹「末日四騎士」，以及相應的解決方法。
              </p>

              {pageFour.map((e, i) => {
                const { title, value, example1, meth1, example2, meth2 } = e;
                return (
                  <div>
                    <div className="page-item-sub">{title}</div>
                    <p className="page-item-info">{value}</p>
                    <div className="page-item-example page-item-example-couple">
                      {example1}
                    </div>
                    <p className="page-item-info">
                      <span style={{ color: color }}>解決方法:</span> {meth1}
                    </p>
                    <div className="page-item-example page-item-example-couple">
                      {example2}
                    </div>
                    <p className="page-item-info">{meth2}</p>
                  </div>
                );
              })}

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <img alt="" className="page-item-banner" src={banner5}></img>
              <div className="relation-sub-title">
                <span
                  className="relation-sub-title-num"
                  style={{ color: color }}
                >
                  <a name={"05"}></a>
                  愛情親密有妙計<span>5</span>：
                </span>
                解除心結
              </div>
              <p className="page-item-info">
                你有沒有一直藏在內心深處的事情沒有跟另一半說？或者一些令你耿耿於懷的心結？如果沒有正確地處理失落的情緒，有些傷痛是可以影響關係的。藏在內心深處的心結會影響伴侶之間的關係，所以我們應嘗試解決問題。以下展開對話的方法：
              </p>
              {pageFive.map((e, i) => {
                const { title } = e;
                return (
                  <div className="page-item-info">
                    <span
                      style={{
                        color: color,
                        fontSize: "24px",
                        marginRight: "6px",
                        fontWeight: 700,
                      }}
                    >
                      {i + 1}
                    </span>
                    {title}
                  </div>
                );
              })}
              <p className="page-item-info">
                過程中可能會出現一些不舒服的時刻，但是過程會令我們變得更加熟悉彼此。遇到問題時便能更有效地解決問題，關係會變得更親密。
              </p>
            </div>
            <div className="page-item">
              <a name={"1"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[1].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner6}></img>
              <p className="page-item-info">
                經營關係一段時間，或許你會開始和另一半商討生育下一代的想法。到底我們在生孩子前，需要考量哪些因素呢？
              </p>
              <div className="page-item-five-box page-item-five-box-couple">
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    <div className="page-item-sub">
                      1. 首先建議夫妻雙方盡量都選擇在最佳的生育年齡裏
                    </div>
                  </p>
                  <p className="page-item-info">
                    在30-32歲前生育，父母雙方的精力以及身體狀況都會相對比較好些，這樣對於生育寶寶的硬件條件就沒有擔憂，而且這個時期身體的免疫力各方面也比較好，如果結婚已經超過最佳生育年紀了，那麽考慮要孩子的情況下建議夫妻雙方先去做個孕前檢查。
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    <div className="page-item-sub">
                      2. 在夫妻雙方經濟穩定的情況下，考慮生孩子
                    </div>
                  </p>
                  <p className="page-item-info">
                    一旦要生孩子，生孩子的成本，以及帶孩子的問題等，物質條件是否具備孕育寶寶所需的各項費用，有許多寶媽寶爸在決定要孩子的那一刻可能需要把這些盤算清楚。如果是考慮自己帶孩子，那麽一方可能需要失業在家帶孩子，這些都是生育孩子需要考慮的條件，畢竟經濟基礎決定一切，如果在雙方還未穩定的情況下，考慮要孩子可能需要根據實際情況。
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    <div className="page-item-sub">
                      3. 是否做好了成為爸爸媽媽的心理準備
                    </div>
                  </p>
                  <p className="page-item-info">
                    女性如果還未準備成為媽媽的情況下，一旦突然有了孩子，媽媽在孕期的整個狀態或者在產後的整個狀態都沒辦法適應和應對的情況下，那麽產後抑郁的可能性就會比較高。另外，男性如果心態上仍未準備好當爸爸，例如：需要減少和朋友相聚的時間、在懷孕期間要支援太太身心的變化、要負責家務等等，可能會適應不良，或與太太增加了爭執。以下有幾個方面的心理準備需要多思考和商量：
                  </p>
                  <p className="page-item-info">
                    <p>
                      <span style={{ color: color }}>• 作息：</span>
                      你現在喜歡、習以為常的生活，可以接受被改變到什麼程度？
                    </p>
                    <p>
                      <span style={{ color: color }}>• 為何想生育：</span>
                      真誠問自己，這是自己想要還是迫於其他人的壓力？
                    </p>
                    <p>
                      <span style={{ color: color }}>• 現實取捨：</span>
                      孩子是一輩子的責任，一旦小孩出生後，原本喜歡的娛樂或想達到的目標某種程度需放下或放棄。
                    </p>
                    <p>
                      <span style={{ color: color }}>• 與伴侶的關係：</span>
                      兩人的溝通機制與默契，是否能應付小孩出生後的情況？
                    </p>
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    <div className="page-item-sub">
                      4. 生育後是否有人幫忙照顧孩子
                    </div>
                  </p>
                  <p className="page-item-info">
                    懷孕期是每個媽媽需要認真對待的一段過程，在媽媽成功誕下寶寶後，不斷出現的問題又要夫婦一起面對。誰可以幫忙照顧媽媽和寶寶？會不會找工人姐姐幫忙？如果家中長輩有時間，會不會提早商量照顧分工？有計劃地生育，讓兩方都感到有所準備，亦就不同的分工商討，找到兩人都能接受的方案，更能順利過渡。
                  </p>
                </div>
                <div className="page-item-five-item">
                  <p className="page-item-info">
                    <div className="page-item-sub">
                      5、物質條件是否具備孕育孩子所需的各項費用
                    </div>
                  </p>
                  <p className="page-item-info">
                    有許多夫婦在決定要生孩子的一刻，都會在心里默默想著給孩子最好的生活條件，物質條件是否充裕是很多夫妻要考慮的因素。當太太在家待產時需要一筆開銷，孩子出生後的奶粉錢、購買新傢俬或者需要搬到大一點的新家以迎接新成員等等。在考慮生孩子的時候，商量這些問題都是有需要的。
                  </p>
                </div>
              </div>
              <p className="page-item-info">
                不論是對人生規劃的影響、對自我表現的擔心、對伴侶的期待，或與原生家庭的關係，想要擁有一個孩子，我們需要考慮的事情很多。如果需要付出那麼多，為什麼我還是想生一個孩子？這之中可能包含了我們對於一個新身份的期待，以及更深層的，我們意識到這能讓我們體驗擁有一個家的感覺。
              </p>
              <p className="page-item-info">
                如果可以思考這些因素，和另一半事事商量，在生育計劃就能更有準備。
              </p>
            </div>
            <div className="page-item">
              <a name={"2"}></a>
              <h2 className="page-item-title" style={{ color: color }}>
                {detailList[2].title}
              </h2>
              <img alt="" className="page-item-banner" src={banner7}></img>
              <p className="page-item-sub-title">生活習慣</p>
              <p class="page-item-info">
                <div class="page-item-sub">吸煙</div>
                相比非吸煙女性，吸煙女性存有的卵子數目會下降得快很多。尼古丁及氰化物等化學物質會加速卵子流失，並把更年期推前。同樣道理，吸煙會令男性的精子數目、活動能力及素質下降，導致情侶更難懷孕。除了影響懷孕率外，香煙中的有害化學物可能會損害卵子和精子的基因物質，從而增加流產及出生嬰兒有先天缺陷的風險。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">咖啡因</div>
                咖啡因到底會否影響懷孕機率，至今仍沒有定論。有些證據指出經常攝取咖啡因會令女性的懷孕時間延長。不過，咖啡因如何影響生育能力，或者女性攝取多少咖啡因才會有不良效果呈現等問題，其實並未有答案。如果你正嘗試懷孕，你應考慮每天飲用不多於兩杯含咖啡因飲料。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">營養</div>
                選擇健康、有營養的餐單可以改善一系列的身體功能，當中包括生殖能力。含有豐富葉酸、碘、多元不飽和脂肪以及維生素的餐單，與改善生育能力和降低胎兒有先天缺陷的風險息息相關。另一方面，高糖份和脂肪的餐單會有相反效果。總之，對於正嘗試懷孕的人（甚至其他人）而言，選擇均衡的、有豐富維生素的餐單會有助日後懷孕。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">酒精</div>
                與咖啡因的情況相似，由於不同證據呈現的意見分歧，所以沒有強烈證據指出少量、偶爾攝取酒精會影響生育能力。不過，暴飲酒精飲料（意即在同一場合內，女性飲用四杯酒精飲料或男性飲用五杯酒精飲料）可能會影響女性排卵、降低精子數目及素質、和減少男性性慾，令情侶們更難受孕。嘗試懷孕、正在懷孕或將會接受輔助生育（例如人工受孕）的人都應盡量避免攝取酒精。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">壓力</div>
                至今仍然沒有定論，壓力會否對生育能力或者不孕情況有影響。憑直覺設想，壓力太大會降低成功懷孕的機率，不過這個關連仍缺乏強烈證據的支持。不過，對於嘗試懷孕，尤其用輔助生育技術的情侶而言，這可以構成很大的壓力來源。情侶可以嘗試一下這些簡單而有效的減壓方法：
              </p>
              <div className="couple-pop-box">
                <div>穴位按摩</div>
                <div>引導想象法</div>
                <div>冥想</div>
                <div>一分鐘活動技巧</div>
              </div>
              <p class="page-item-info">
                <div class="page-item-sub">藥物與毒品</div>
                有些藥物（不過不是全部）會影響生育能力，不論是醫生處方藥物，還是娛樂性或非處方藥物。視乎藥物種類、劑量、服用時間長短，這些藥物可能會損害男性製造精子的能力以及女性製造引致排卵的激素。
              </p>
              <p class="page-item-info">
                <span style={{ color: color, fontWeight: 600 }}>
                  處方藥物：
                </span>
                有些用於處理身體病況的藥物會同時導致短期或長期的生育能力問題。例子包括用於處理腎臟問題的環磷酰胺，處理發炎性腸道疾病及類風濕關節炎的斯樂腸溶錠，以及在有些情況下，處理癌症的化學治療及放射治療。
              </p>
              <p class="page-item-info">
                <span style={{ color: color, fontWeight: 600 }}>
                  娛樂性及非法藥物：
                </span>
                同化類固醇、可卡因、海洛英、大麻及搖頭丸等都會降低男性以及女性的懷孕機會。
              </p>

              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <p className="page-item-sub-title">身體健康</p>
              <p class="page-item-info">
                <div class="page-item-sub">體重</div>
                肥胖與不孕的關係已經被廣泛接納。肥胖男性的生育能力比正常體重的男性為低。另一方面，過輕的男性生育率也會較低。正常體重的女性比肥胖、甚至癡肥的女性有更高生育能力，不過後者可以透過參與體重控制計劃來提升自己的生育能力。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">性傳播感染</div>
                性傳播感染與生育能力的關係仍然未明，因為只有某部份細菌及病毒與不孕有關。對男性而言，愛滋病與淋病都與不育有關。此外，無症狀的感染也可能會降低精子素質，從而令生育能力減低。有淋病、衣原體感染或梅毒的女性，生育能力會比沒有任何性傳播感染的健康女性低。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">月經不規律症狀</div>
                有多囊性卵巢綜合症的女性會比健康女性的生育能力低。多囊性卵巢綜合症的症狀包括不規律的月經週期以及高水平的雄性激素（以致面毛及體毛過剩）等，而這些症狀會在青春期後期和二十多歲早期呈現。此外，原發性無月經症和厭食症（會導致無月經症）兩者都與不孕有關。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">懷孕前檢查</div>
                產前檢查對女性了解她們的整體健康及生育能力狀態都十分有幫助。香港家庭計劃指導會（家計會）為男性和女性都有提供懷孕前健康檢查，包括性傳播感染、乙型肝炎和德國麻疹的檢查等。
              </p>
              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <p className="page-item-sub-title">年齡與時間</p>
              <p class="page-item-info">
                <div class="page-item-sub">女性年紀</div>
                年紀是影響女性懷孕機會的最大單一因素。女性出生時，體內就已經擁有一生中所有的卵子儲備，而卵子的數量跟質量亦會隨年紀逐漸下降。一般女性的生育能力在二十多歲時最高，過了三十五歲後便會顯著下降。一位四十歲女性的生育能力更只有三十歲時的一半。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">男性年紀</div>
                男性的精子數量及活躍程度會隨著年紀增長而下降。女性懷孕時，若男性伴侶的年紀超過五十歲，流產的機會會更高。
              </p>
              <div
                style={{
                  borderBottom: `2px dashed ${color} `,
                  margin: "40px 0",
                }}
              ></div>
              <p className="page-item-sub-title">什麼是生育期？</p>

              <p class="page-item-info">
                女性只能在一個月經週期當中的數天受孕。這個「生育期」通常指女性排卵當天及排卵前的五天。排出的卵子會經輸卵管運送到到子宮。排卵後若精子在輸卵管內使卵子受精，形成胚胎，女性便能懷孕。因此在生育期行房，懷孕的機率會會較高。
              </p>
              <p class="page-item-info">
                <div class="page-item-sub">排卵期的跡象</div>
                無論你正在嘗試懷孕或正在避孕，你都應該了解自己的排卵期，以便作出相應措施。以下是幾個計算排卵期的方法：
              </p>
              <div className="relation-pop-three-couple-flex">
                <div className="couple-item">
                  <div
                    className="couple-item-title-three"
                    style={{ color: color, fontWeight: 600 }}
                  >
                    日曆計算法：
                  </div>
                  日曆計算法是計算排卵日最直接的方法，坊間亦有不少輔助的電話應用程式。一位女性的排卵日通常是經期前的14天左右。不過，這個方法不太適用於月經週期不規律的女性
                </div>
                <div className="couple-item">
                  <div
                    className="couple-item-title-three"
                    style={{ color: color, fontWeight: 600 }}
                  >
                    體溫記錄：
                  </div>
                  排卵時，身體的基礎體溫（指身體在完全休息狀態時的體溫）會開始上升，並在往後兩周直到經期前維持在較高水平。想更準確地辨認排卵日，建議你於每天早上同一時間連續作體溫記錄
                </div>
                <div className="couple-item">
                  <div
                    className="couple-item-title-three"
                    style={{ color: color, fontWeight: 600 }}
                  >
                    留意白帶的變化：
                  </div>
                  即將排卵時，白帶會呈生蛋白狀（即透明、量多並粘稠於指尖間），亦是希望懷孕的女性最適合行房的時間
                </div>
              </div>
              <p class="page-item-info">
                每對夫婦都是獨一無二的，在懷孕的旅程中都會面臨各自的挑戰。不過，無論如何，保持健康的生活方式對所有夫婦來說都非常重要。通過重視健康的生活方式，夫婦們可以改善整體健康狀況，提高懷孕的機會。這包括養成好習慣，像是定期運動、均衡飲食，還有遠離有害物質，比如說不抽煙。通過積極採取健康的生活方式，夫婦可能能夠增加實現成功懷孕和享受充實懷孕旅程的機會。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="page-bar">
        {detailList.map((e, i) => {
          const { titleBar, title, id } = e;
          return (
            <div
              style={{
                display: "flex",
                margin: barMargin,
                color: color,
                cursor: "pointer",
              }}
            >
              <div
                style={{
                  minWidth: "10px",
                  background: color,
                  borderRadius: "5px",
                  margin: "0 10px",
                }}
              ></div>
              {i === 0 ? (
                <div>
                  <a
                    dangerouslySetInnerHTML={{ __html: titleBar }}
                    href={"#" + i}
                    style={{ color, textDecoration: "none" }}
                  ></a>
                  <div className="alink">
                    <a
                      dangerouslySetInnerHTML={{ __html: "1" }}
                      href={"#01"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "2" }}
                      href={"#02"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "3" }}
                      href={"#03"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "4" }}
                      href={"#04"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                    <a
                      dangerouslySetInnerHTML={{ __html: "5" }}
                      href={"#05"}
                      style={{ color, textDecoration: "none" }}
                    ></a>
                  </div>
                </div>
              ) : (
                <a
                  dangerouslySetInnerHTML={{ __html: titleBar }}
                  href={"#" + i}
                  style={{ color, textDecoration: "none" }}
                ></a>
              )}
            </div>
          );
        })}
      </div>
      <img
        className="page-close cursor-pointer"
        alt=""
        src={close}
        onClick={() => pathSwitch()}
      />
      <div className="page-detail-foot">
        <div className="gradual gradual-couple"></div>
        <div className="detail-foot"></div>
        <div className="detail-floor"></div>
      </div>
    </div>
  );
}

export default DetailCouple;
